* {margin: 0;
    padding: 0;
    box-sizing: border-box;
scroll-behavior: smooth}

body { margin: 0;
    font-family: sans-serif;
scroll-behavior: smooth;
}

body h1{ font-family: PlayPretend;
font-style: normal;
font-weight: 400;}
@font-face {
  font-family: 'PlayPretend';
  src: url('../fonts/PlayPretend.otf') format('opentype');
  font-style: normal; font-weight: 400;
}
 
    #heroheader {display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120vh;
    background-image: url(../images/distance-format-mea\ \(1\).png);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0 60px 60px 60px;}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 109px;
    width: 100%;
    max-width: 1920px;
    margin: 0;
    position: sticky; 
    top: 0;   
    left: 0;
    z-index: 1000;      
    padding: 0 60px;
margin-bottom: -109px;}
   
   .nav-logo a {
    display: inline-flex;
    text-decoration: none;
}

.nav-logo img {
    height: 45px;
    width: auto;
    display: block;
    transition: opacity 0.3s ease; }

.nav-links a {color: white;
    text-decoration: none;
    font-size: 2vh;}

    #heroheader .title-top {align-self: center;
    margin-top: 180px;}

#heroheader h1 {font-size: 15vh;
    color: black; 
    line-height: 1;}

    #heroheader .content-bottom {align-self: flex-start;}

    #heroheader h2 {color: white;
    font-size: 3vh;}

    #heroheader h3 {color: #EC6E00;
    font-size: 2.5vh;
    text-transform: uppercase;
    margin-bottom: 150px;}


#deuxsection {background-image: url(../images/wp8670538-4k-mars-wallpapers.jpg);
    background-size: cover;
    min-height: 200vh;
    padding: 40x 0;}
    #section1 { padding-left: 60px;}

    #section1 h1 {color: #EC6E00;
    font-size: 7vh;
padding-bottom: 5vh;}

    #section1 p {color: white;
    font-size: 20px;
    max-width: 800px;
    line-height: 1.4;}

#section1 img {height: 70vh;
    float: right;
    margin-left: 20px;
position: relative;
top: -200px;}

    #section1 .element:nth-child(2)
    { max-width: fit-content;}


    #section2 {clear: both;
    display: flex;
    flex-wrap: wrap;                    
    justify-content: center;
    padding: 5% 2%;
position: relative;
top: -15vh;}

#section2 .element:nth-child(1) {width: 100%;
    margin-bottom: 60px;
    text-align: left;}

    #section2 h2 {color: #EC6E00;
    font-size: 5vh;
    font-family: PlayPretend;
    font-style: normal;
    font-weight: 400;}

    #section2 h3 {color: white;
    font-size: 50px;}



    #section2 .element:nth-child(2),
    #section2 .element:nth-child(3),
    #section2 .element:nth-child(4) {flex: 1;               
    text-align: center;
    min-width: 250px;}

#section2 p {color: white;
    font-size: 20px;      
    line-height: 1.5;
padding: 1vh;}

    #section2 .element:last-child {width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 80px;}

#section2 .element img {max-width: 250px;      
    height: auto;
position: relative;
top: 10vh;}


    #section3 {display: flex;
        justify-content: center;align-items: center;
        flex-direction: column;
        height: 80vh;
        background-image: url(../images/ingenuity-contact-perdu.jpg);
        background-size: cover;
        background-position: center;
        gap: 40px;}

#section3 h1 {
    color: black;
    font-size: 10vh;}

.btn-link {
    width: fit-content;
    background-color: #EC6E00;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 30px;
    font-size: 3vh;
    cursor: pointer;
    transition: 0.3s;
    
    text-decoration: none;
    display: inline-block; 
    text-align: center;
}

.btn-link:hover {
   
    background-color: #ff851b; 
    color: white;
}

    footer {background-color: black;
    height: auto;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;}

    #footer p {color: white;
        text-align: center;
        font-size: 1.5vh;
        line-height: 1.6;}